body *{font-family: "Microsoft YaHei UI";}
body::-webkit-scrollbar {display:none}
.scrollbar_none::-webkit-scrollbar {display:none}
span{cursor: pointer}
.p-105rem{padding: 1.05rem}

[v-clock]{
    display: none;
}

.p-t-5{padding-top: 5px;}
.p-t-7{padding-top: 7px;}
.p-t-9{padding-top: 9px;}
.p-t-13{padding-top: 13px;}
.p-t-15{padding-top: 15px;}
.p-t-16{padding-top: 16px;}
.p-t-18{padding-top: 18px;}
.p-t-23{padding-top: 23px;}
.p-t-24{padding-top: 24px;}
.p-t-25{padding-top: 25px;}
.p-t-28{padding-top: 28px;}
.p-t-29{padding-top: 29px;}
.p-t-32{padding-top: 32px;}
.p-t-36{padding-top: 36px;}
.p-t-50{padding-top: 50px;}
.p-t-80{padding-top: 80px;}

.p-l-6{padding-left: 6px;}
.p-l-13{padding-left: 13px;}
.p-l-14{padding-left: 14px;}
.p-l-15{padding-left: 15px;}
.p-l-16{padding-left: 16px;}
.p-l-17{padding-left: 17px;}
.p-l-19{padding-left: 19px;}
.p-l-21{padding-left: 21px;}
.p-l-23{padding-left: 23px;}
.p-l-24{padding-left: 24px;}
.p-l-25{padding-left: 25px;}
.p-l-26{padding-left: 26px;}
.p-l-28{padding-left: 28px;}
.p-l-29{padding-left: 29px;}
.p-l-30{padding-left: 30px;}
.p-l-32{padding-left: 32px;}
.p-l-39{padding-left: 39px;}
.p-l-43{padding-left: 43px;}
.p-l-45{padding-left: 45px;}
.p-l-47{padding-left: 47px;}
.p-l-60{padding-left: 60px;}
.p-l-92{padding-left: 92px;}

.p-r-12{padding-right: 12px;}
.p-r-15{padding-right: 15px;}
.p-r-16{padding-right: 16px;}
.p-r-19{padding-right: 19px;}
.p-r-22{padding-right: 22px;}
.p-r-25{padding-right: 25px;}
.p-r-31{padding-right: 31px;}
.p-r-35{padding-right: 35px;}
.p-r-41{padding-right: 41px;}
.p-r-43{padding-right: 43px;}
.p-l-51{padding-left: 51px;}
.p-r-90{padding-right: 90px;}

.p-b-8{padding-bottom: 8px;}
.p-b-13{padding-bottom: 13px;}
.p-b-15{padding-bottom: 15px;}
.p-b-17{padding-bottom: 17px;}
.p-b-18{padding-bottom: 18px;}
.p-b-27{padding-bottom: 27px;}
.p-b-29{padding-bottom: 29px;}
.p-b-32{padding-bottom: 32px;}
.p-b-38{padding-bottom: 38px;}
.p-b-41{padding-bottom: 41px;}
.p-b-42{padding-bottom: 42px;}
.p-b-44{padding-bottom: 44px;}
.p-b-49{padding-bottom: 49px;}
.p-b-50{padding-bottom: 50px;}
.p-b-51{padding-bottom: 51px;}


.m-t-_2{margin-top: -2px;}
.m-t-21{margin-top: 21px;}
.m-t-135{margin-top: 135px;}
.m-t-70{margin-top: 70px;}

.m-r-7{margin-right: 7px;}
.m-r-18{margin-right: 18px;}
.m-r-19{margin-right: 19px;}
.m-r-21{margin-right: 21px;}
.m-r-26{margin-right: 26px;}
.m-r-29{margin-right: 29px;}

.m-b-8{margin-bottom: 8px;}
.m-b-12{margin-bottom: 12px;}
.m-b-19{margin-bottom: 19px;}
.m-b-29{margin-bottom: 29px;}
.m-b-48{margin-bottom: 48px;}
.m-b-49{margin-bottom: 49px;}
.m-b-55{margin-bottom: 55px;}

.m-l-_1{margin-left: -1px;}
.m-l-7{margin-left: 7px;}
.m-l-9{margin-left: 9px;}
.m-l-29{margin-left: 29px;}
.m-l-30{margin-left: 30px;}
.m-l-35{margin-left: 35px}
.m-l-47{margin-left: 47px}


.disflex{display: flex}
.dis-inline-block{display: inline-block}

.jsbet{justify-content: space-between}
.jsend{justify-content: flex-end}
.jscen{ justify-content:center}
.jsaround{justify-content: space-around}
.align-cen{align-items:center}
.wrap{flex-wrap: wrap}
.row-reverse{flex-direction: row-reverse}
.column-reverse{flex-flow: column-reverse}
.flex1{flex: 1}
.wrap{flex-wrap: wrap}
.align-self-start{align-self: flex-start;}

.cblue{color: #51CDCB}
.cblue_2{color: #8D97AD}
.cdeepblue{color: #455A64}
.ce4{color: #E4E9EA}
.cfff{color: #fff}
.c78{color: #787878}
.c26{color: #263238}
.cffa133{color: #ffa133}
.c677{color: #67757C}
.cbcc{color: #BCC3D3}
.ca8{color: #a8a8a8}
.c38{color: #383838}


a.hoverfff:hover{color: #fff}

.bgnone{background: none}
.bgf5f6{background: #f5f5f6}
.bgfff{background: #fff !important;}
.bgfff_5{background: rgba(255,255,255,.5)}
.bgblue{background: #51CDCB;}
.bggreen{background: #2BCF88;}
.bgblue_2{background: #B9EBEA}
.bgpurple{background: #6772E5}
.bgf6f9fa{background: #F6F9FA}
.bg000_3{background: rgba(0,0,0,.3)}
.bg566{background: #566C84}
.bg_line_orange{background: linear-gradient(to right, #FE7563, #FD634E);}
.bg_line_yellow{background: linear-gradient(to right, #FCAD3D, #FFA133);}

.bced{border: 1px solid #CED4DA}
.btef0{border-top: 1px solid #EEEFF0}
.bte8{border-top: 1px solid #E8E8E8}
.bbef0{border-bottom: 1px solid #EEEFF0}
.bf5f6{border: 1px solid #f5f5f6}
.hoverb0:hover{border: 0}



.bbblue_2{border-bottom: 2px solid #51CDCB}
.bblue{border: 1px solid #51CDCB}
.bef0{border: 1px solid #EEEFF0}
.b1{border: 1px solid}
.b0{border: none}
.blef0{border-left: 1px solid #EEEFF0}

.shadow-gray{box-shadow: 0 0 25px rgba(56, 56, 56, 0.05);}

.lh16{line-height: 16px;}
.lh22{line-height: 22px;}
.lh24{line-height: 24px;}
.lh40{line-height: 40px;}
.lh41{line-height: 41px;}
.lh43{line-height: 43px;}
.lh45{line-height: 45px;}
.lh70{line-height: 70px;}
.lh71{line-height: 71px;}
.lh120{line-height: 120px;}

.w12{width: 12px;}
.w13{width: 13px;}
.w15{width: 15px;}
.w16{width: 16px;}
.w20{width: 20px;}
.w30{width: 30px;}
.w40{width: 40px;}
.w46{width: 46px;}
.w50{width: 50px;}
.w68{width: 68px;}
.w81{width: 81px;}
.w85{width: 85px;}
.w100{width: 100px;}
.w105{width: 105px;}
.w118{width: 118px;}
.w120{width: 120px;}
.w146{width: 146px;}
.w200{width: 200px;}
.w211{width: 211px;}
.w220{width: 220px;}
.w237{width: 237px;}
.w240{width: 240px;}
.w241{width: 241px;}
.w300{width: 300px;}
.w360{width: 360px;}
.w400{width: 400px;}
.w420{width: 420px;}
.w576{width: 576px;}
.w629{width: 629px;}
.w671{width: 671px;}
.w781{width: 781px;}
.w10p{width: 10%}
.w20p{width: 20%}
.w21p{width: 21%}
.w33p{width: 33%}
.w45p{width: 45%;}
.w50p{width: 50%}
.w55p{width: 55%}
.w60p{width: 60%}
.w100p{width: 100%;}

.h12{height: 12px;}
.h15{height: 15px;}
.h16{height: 16px;}
.h20{height: 20px;}
.h24{height: 24px;}
.h30{height: 30px;}
.h34{height: 34px;}
.h38{height: 38px;}
.h40{height: 40px;}
.h45{height: 45px;}
.h50{height: 50px;}
.h80{height: 80px;}
.h100{height: 100px;}
.h120{height: 120px;}
.h190{height: 190px;}
.h200{height: 200px;}
.h210{height: 210px;}
.h355{height: 355px;}
.h388{height: 388px;}
.h400{height: 400px;}
.h530{height: 530px;}
.h750{height: 750px;}
.h100p{height: 100%}

.lh26{line-height: 26px;}
.lh30{line-height: 30px;}
.lh38{line-height: 38px;}
.lh80{line-height: 80px;}

.fs12{font-size: 12px;}
.fs14{font-size: 14px;}
.fs16{font-size: 16px;}
.fs18{font-size: 18px;}
.fs20{font-size: 20px;}
.fs24{font-size: 24px;}
.fs30{font-size: 30px;}
.fs48{font-size: 48px;}

.fbold{font-weight: bold}


.bradius3{border-radius: 3px;}
.bradius4{border-radius: 4px;}
.bradius6{border-radius: 6px;}
.braduis10{border-radius: 10px;}
.braduis50p{border-radius: 50%;}


.borderbox{box-sizing: border-box}
.contentbox{box-sizing: content-box}

.posre{position: relative}
.posab{position: absolute}
.posfix{position: fixed}

.top-3{top: -3px;}
.top1{top: 1px;}
.top0{top: 0;}
.top3{top: 3px;}
.top21{top: 21px;}

.left0{left: 0}
.left90{left: 90px;}
.right0{right: 0}
.right30{right: 30px;}

.bottom-100p{bottom: -100%}
.bottom0{bottom: 0}
.bottom29{bottom: 29px;}
.bottom50{bottom: 50px;}
.bottom66p{bottom: 66%}


.mauto{margin: auto}

.textc{text-align: center}

.curpointer{cursor: pointer}
.curdisabled{cursor: not-allowed}

.trans2{transition: .2s}

.opacity1{opacity: 1}
.opacity0{opacity: 0}
.zindex-1{z-index: -1}
.zindex99{z-index: 99}
.zindex10002{z-index: 10002}

.oyauto{overflow-y: auto}
.ohidden{overflow: hidden}

.line-through{
    text-decoration: line-through;
}

.fixed-table{
    table-layout: fixed;
}

table.small-table-padding th,
table.small-table-padding td{
    padding: 12px 3px;
}

.fixed-table.text-ellipsis th,
.fixed-table.text-ellipsis td{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.over_2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

input.phgray::-webkit-input-placeholder,
textarea.phgray::-webkit-input-placeholder{
    color:#BCC3D3;
    font-size: 14px;
}
input.phgray::-moz-placeholder,
textarea.phgray::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#BCC3D3;
    font-size: 14px;
}
input.phgray:-moz-placeholder,
textarea.phgray:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#BCC3D3;
    font-size: 14px;
}
input.phgray:-ms-input-placeholder,
textarea.phgray:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#BCC3D3;
    font-size: 14px;
}






/*wx_login*/
.blue-line{position: relative}
.blue-line::before,.blue-line::after{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.wx_login{
    background: url("./../../assets/images/diy/bg.png") no-repeat center;
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;
}
/*loudou*/
.loudou{
    padding-top: 30px;
    font-size: 12px;
}
.loudou img{
    width: 80%;
    margin-left: 10%;
    /*height: 260px;*/
}
.loudou .look{
    left: 32.5%;
    top: 21%;
}
.loudou .palce_order{
    left: 32.5%;
    top: 51.5%;
}
.loudou .pay{
    left: 32.5%;
    top: 82%;
}
.loudou .right1{
    right: 20%;
    top: 35%;
}
.loudou .right2{
    right: 28%;
    top: 64.5%;
}
.loudou .right3{
    right: 2%;
    top: 52%;
}
.choose_color {
    width: 43px;
    height: 219px;
    transition: .2s;
}

.choose_color.w0 {
    width: 0;
    overflow: hidden;
}

.triangle_border_right {
    display: block;
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotate(45deg);
    position: absolute;
    right: -4px;
    top: 12px;
}

.mdi-check.checks{
    border:1px solid #51CDCB;
    line-height: 16px;
}
.mdi-check.checks::before{
    color: #51CDCB;
    /*position: relative;
    top: -3px;
    font-weight: 700;*/
}
/*diy-radio*/
.diy-radio{
    width: 16px;
    height: 16px;
    border: 1px solid #CED4DA;
    border-radius: 50%;
    transition: .1s;
}
.diy-radio.check{
    border-color: #51CDCB;
    position: relative;
}
.diy-radio.check::before{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #51CDCB;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.preview-inner{
    background: url("../../assets/images/diy/iphone.png") no-repeat;
    background-size: 100% 100%;
    width: 433px;
    height: 884px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow-y: auto;
    padding: 110px 33px 109px 28px;
}
.preview-inner .img-fluid{
    width: 100%;
    height: 355px;
    max-width: initial;
}
.add_to_card{
    border-radius: 20px 0 0 20px;
}
.buy_now{
    border-radius: 0 20px 20px 0;
}
.preview-inner .bottom{
    bottom: 109px;
    padding: 0 31px 0 28px;
}




/*style.css修改*/
.sidebar-nav ul li a{
    font-size: 16px;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
    background: #51CDCB !important;
}
.custom-radio .custom-control-input:checked~.custom-control-label::before{
    background: #51CDCB;
}
.customtab li a.nav-link{
    padding: 34px 31px 19px 30px ;
}
.align-cen-table.table td{
    vertical-align: inherit;
}
.comment-widgets .comment-row{
    padding: 21px 15px  9px 26px;
}
.comment-widgets{
    margin-bottom: -0;
}
.comment-text{
    padding-bottom: 0;
    padding-top: 0;
}
.comment-text p{
    width: auto;
}
.diy-circle-arrow.mdi-arrow-up:before , .diy-circle-arrow.mdi-arrow-down:before{
   /* position: relative;
    top: -3px;
    font-size: 16px;
    left: -1px;*/
}
.prod_control.grid-stack > .grid-stack-item{
    /*height: 46px;*/
}
.el-element-overlay .el-card-item .el-overlay-1 img{
    height: 100%;
}
.el-element-overlay .el-card-item{
    padding-bottom: 0;
}
.carousel-item .container{
    padding: 0;
}
.diy_prod_detail p{
    margin-bottom: 0;
}
.topbar .top-navbar .navbar-header{
    /*padding-left: 25px;*/
}

/*禁用按钮*/
.disabled{
    background: #ccc !important;
    border-color: #ccc !important;
    cursor: no-drop;
}


/*分页*/
.page-helper {
    font-weight: 500;
    height: 40px;
    text-align: center;
    color: #888;
    margin: 10px auto;
}
.page-list {
    font-size: 0;
    height: 50px;
}
.page-list span {
    font-size: 14px;
    margin-right: 5px;
    user-select: none;
}
.page-list .page-item {
    display: inline-block;
    padding: 5px 8px;
    min-width: 30px;
    text-align: center;
    color: #67757c;
    background: #F6F9FA;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
}
.page-ellipsis {
    padding: 0 8px;
}
.page-jump-to input {
    width: 45px;
    height: 26px;
    font-size: 13px;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
}
.page-list .jump-go-btn {
    font-size: 12px;
}
.page-select{
    border: 1px solid #aaa;
    padding: 5px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
    margin-left: 5px;
}
.page-list .page-item .disabled{
    pointer-events: none;
    background: #ddd;
}
.page-list .page-current {
    cursor: default;
    color: white;
    background: #51CDCB;
}

.money-log{
    max-height: 250px;
    overflow: auto;
    border-top: 1px solid #EEEFF0 !important;
}
.money-log > div:first-child{
    border-top: 0;
}
.money-log .log-info span{
    flex: 0 0 20%;
    box-sizing: border-box;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.money-log .log-info span:first-child{
    flex: 0 0 40%;
}


.customtab li span.nav-link,.profile-tab li span.nav-link {
    border: 0px;
    padding: 15px 20px;
    color: #67757c
}

.customtab li span.nav-link.active,.profile-tab li span.nav-link.active {
    border-bottom: 2px solid #51CDCB;
    color: #51CDCB
}

.customtab li span.nav-link:hover,.profile-tab li span.nav-link:hover {
    color: #51CDCB
}

.customtab li span.nav-link.active {
    border-bottom: 2px solid #51CDCB;
    color: #51CDCB;
}

.customtab li span.nav-link:hover {
    color: #51CDCB;
}

.icon-plus{
    position: relative;
    cursor: pointer;
}

.icon-plus:before,
.icon-plus:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(206, 212, 218);
}

.icon-plus:before{
    height: 60%;
    width: 1px;
}

.icon-plus:after{
    height: 1px;
    width: 60%;
}

.required{
    position: relative;
}
.required:before{
    content: '*';
    color: red;
    position: absolute;
    transform: translateX(-120%);
}

.show-more{
    cursor: pointer;
}

.goods-img,
.img-bg-box{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.c3-tooltip-container{
    color: #000;
}

.del-goods-pic{
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
}

.company-position{
    box-sizing: border-box;
    font-size:12px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(188,195,211,1);
    line-height:18px;
    padding-right: 10px;
}

.company-position span:first-child{
    display: block;
}
.company-position span:last-child{
    display: none;
}

.mini-sidebar .company-position span:first-child{
    display: none;
}
.mini-sidebar .company-position span:last-child{
    display: block;
}

.confirm-class .layui-layer-btn .layui-layer-btn0{
    border: 1px solid #dedede !important;
    background-color: #fff !important;
    color: #67757c !important;
}

.confirm-class .layui-layer-btn .layui-layer-btn1{
    border-color: #1E9FFF;
    background-color: #1E9FFF;
    color: #fff!important;
}

.member-item .name,
.member-item .phone,
.member-item .time{
    display: inline-block;
    width: 90px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.member-item .time{
    width: 120px;
}


.vdp-datepicker__clear-button{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.today-join{
    position: absolute;
    top: 114px;
    background: white;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    padding: 30px;
    box-shadow:0 5px 25px rgba(56, 56, 56, 0.05);
}

.today-join h3{
    color: #51CDCB;
    text-align: center;
    line-height: 1;
    font-size: 14px;
    margin-bottom: 15px;
}


.field-list .item{
    display: flex;
    line-height: 40px;
}

.field-list .item .field-name{
    flex-basis: 100px;
}
.field-list .item .field-value{
    flex-grow: 1;
}

.hide{
    display: none;
}

.index-total-list-box{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.index-total-list-box .item{
    margin: 0 15px;
    flex-grow: 1;
}

/* 自定义弹框 */
.custom-dialog{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    padding: 30px;
    background: white;
    border-radius: 5px;
}

.assemble-form .form-item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.assemble-form .form-item>span:first-child{
    white-space: nowrap;
    margin-right: 10px;
}

.assemble-form .form-item input[type=text],
.assemble-form .form-item input[type=number]{
    max-width: 220px;
    width: auto!important;
}

#date-picker {
    width: 300px;
  }
  #date-picker .ivu-input{
    width: 100%!important;
    max-width: inherit;
  }